<template>
        <div class="main">
          <div class="regismain">
          <div class="regishead">
            <ul>
              <router-link to="/" target="_blank" >
              <li>返回首页</li>
              </router-link >
            </ul>
          </div>
          <div class="regisbody">
            <h2 style="text-align:center;margin-bottom:30px">欢迎注册</h2>
            <el-form :model="regisinfo"  ref="regisinfo" :rules="dataRule" >
             <el-form-item label="" prop="nickname" >
             <el-input v-model="regisinfo.nickname" placeholder="昵称" style="width:100%"></el-input>
             </el-form-item>
             <el-form-item label="" prop="username" :rules="[{ required: true, message: '用户名不能为空', trigger: 'blur' },{validator:checkUsername, trigger: 'blur'}]" >
             <el-input v-model="regisinfo.username" placeholder="用户名" ></el-input>
             </el-form-item>
             <el-form-item label="" prop="password" >
             <el-input v-model="regisinfo.password" type="password" placeholder="密码" style="width:100%"></el-input>
             </el-form-item>
             <el-form-item label="" prop="email" :rules="[{ required: true, message: '邮箱不能为空', trigger: 'blur' },{validator:checkEmail, trigger: 'blur'}]"  >
             <el-input v-model="regisinfo.email" placeholder="邮箱" style="width:100%"></el-input>
             </el-form-item>

             <el-form-item prop="code" :rules="[{ required: true, message: '请输入验证码', trigger: 'blur' },{validator:checkCode, trigger: 'blur'}]">
             <div style="width: 100%;display: block;float: left;position: relative">
             <el-input type="text" placeholder="邮箱验证码" v-model="regisinfo.code"/>
             </div>
             <div  style="position:absolute;right: 0;top: 6px;width: 40%;">
             <a href="javascript:"  type="button" @click="getCodeFun()" :value="codeTest" style="border:none;background-color:none;margin-top:5px;display:block">{{codeTest}}</a>
              </div>
             </el-form-item>   
          
             <el-form-item>
             <el-button type="primary" @click="onSubmit()" style="width:100%;height:50;font-size:18px">注册</el-button>
             </el-form-item>


            </el-form>
          </div>
          </div> 
        </div>
</template>
<script>
import user from '@/api/user'
export default {
    layout: 'register',
    data() {
      return {
        visible: false,
        regisinfo:{},
         dataRule: {
          username: [
            { required: true, message: '用户名不能为空', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '邮箱不能为空', trigger: 'blur' }
          ],
          nickname: [
            { required: true, message: '昵称不能为空', trigger: 'blur' }
          ],
         },
        second: 60,        //倒计时间
        codeTest: '获取验证码',
        disabled:false,
       }
      },
       methods: {
           regis(){
             alert("A")
           },
          checkUsername(rule, value,callback){
          user.isexistUsername(value)
          .then(response => {
              if(response.data.result===1){
                return callback(new Error('用户名已存在'))
              }else{
                   return callback()
              }
          })
          },
          checkEmail(rule,value,callback){
            user.isexistemail(value)
              .then(response => {
              if(response.data.result===1){
                return callback(new Error('邮箱已存在'))
              }else{
                   return callback()
              }
              })
          },
           checkCode(rule,value,callback){
            user.isexistcode(this.regisinfo.email,value)
              .then(response => {
              if(response.data.result===2){
                return callback(new Error('验证码错误'))
              }else{
                   return callback()
              }
              })
          },
          // 通过输邮箱号发送验证码
       getCodeFun(){
         if(this.disabled===false){
          
           user.sendCode(this.regisinfo.email)
           .then(response => {
               console.log(response.data.result)
             if(response.data.result ===0){
                this.disabled = true;
                this.timeDown()
             }

           })
          
         }
         else{

         }
       },
      //  倒计时
       timeDown() {
       
        console.log("A")
        let result = setInterval(() => {
          --this.second;
          this.codeTest = this.second
          if (this.second < 1) {
             clearInterval(result);
            this.disabled = false;
            this.second = 60;
            this.codeTest = "获取验证码"
          }
        }, 1000);

      },
      onSubmit(){
        user.registe(this.regisinfo)
        .then(response=>{
          if(response.data.token=='false'){
                 this.$message({
                 type: 'false',
                 message: "输入不符合要求"
              })
              }
             else{
                 this.$message({
                 type: 'success',
                 message: "注册成功"
              })

              //跳转登录页面
               this.$router.push({path:'/'}) 
              }
         })
       }
}
}
</script>

<style scoped>
.main{
  width:100;
}
>>>  .el-input__inner{
  height: 52px;
}
>>> .el-input{
   font-size:18px;
   height:70px;
 }
.regismain{
  width:68%;
  margin-left: 32%;
}
.regisbody{
  width:50%;
  height: auto;
  margin-left:25%;
  margin-top: 70px;
  }
.regishead{
  height: 20px;
  margin-left:80%;
  margin-top: 30px;
}
.regishead ul{
  list-style: none;
  font-size: 16px;
}
.regishead li{
  float: left;
  width: 120px;
  text-align: center;
}
</style>

